iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

尋覓網站開發的神兵利器系列 第 29

28 - lint-staged - Lint Git Commit 的檔案

  • 分享至 

  • xImage
  •  

做 lint 、 format 或是通過測試,對於程式碼的品質維護有很大的幫助,因此在提交代碼時,我們會使用 Git hooks 確保這些優化程序有被執行。

但是在 Git hooks 執行這些優化時,程序處理的範圍會包含整個專案的程式碼,就算是未提交的檔案,依然會被作為優化對象,這樣一來會浪費許多時間。

只 Lint 修改的檔案 - lint-staged

lint-staged 是個 npm 套件,它會依照配置將符合規則( glob )的 Git 暫存檔案路徑帶入設定的程序中並執行。

lint-staged 的目的就是讓這些優化程序只作用於提交的程式碼上,進而減少花費的時間。

安裝 lint-staged

用 npm 安裝 lint-staged :

npm install lint-staged --save-dev

使用 lint-staged

使用前需要建立配置檔 lint-staged.config.js

module.exports = {
  '*': ['echo'],
};

為了解說 lint-staged 的功能,這裡將所有提交的檔案都以 echo 輸出參數資訊。

接著將檔案加入暫存區中:

git add package.json package-lock.json

然後執行 lint-staged 指令:

npx lint-staged -v

lint-staged 預設不輸出程序的訊息,為了觀看 lint-staged 的功能,要加上參數 -v ,它會顯示程序所輸出的訊息。

執行的結果如下:

> lint-staged -v

✔ Preparing...
✔ Running tasks...
✔ Applying modifications...
✔ Cleaning up...

ℹ echo:
/Users/PeterChen/Documents/code/build-a-super-comfortable-web-dev-env/days/11-lint-staged/examples/example-lint-staged/package-lock.json /Users/PeterChen/Documents/code/build-a-super-comfortable-web-dev-env/days/11-lint-staged/examples/example-lint-staged/package.json

進入暫存的的檔案 package.jsonpackage-lock.json 被作為參數傳入程序中,並被 echo 輸出。

不同檔案執行不同程序

lint-staged 設定的每個規則的鍵值為 glob 的字串, lint-staged 會將包含在內的檔案轉為絕對路徑( absolute path )並作為參數傳入各個指令內。

例如下面這個例子:

module.exports = {
  '*.js': ['echo'],
};

這樣的配置會只讓 JS 檔案被 echo 輸出路徑,例如 lint-staged.config.js 就會被包含,但是 package.json 因為不是 .js 的檔案,所以就算提交了還是不會被 echo 輸出。

複數指令

有時在同個檔案上,我們不只要使用 linter 檢查語法的問題,還要使用 formatter 格式化,甚至執行測試確認通過。

lint-staged 可以設置陣列,讓複數指令作用於相同的檔案上。

以下面的例子來說:

module.exports = {
  '*': ['echo', 'cat'],
};

它會對所有的提交的檔案執行 echocat

與 Husky 整合

藉由與 Husky 的整合,在提交前確保程式碼的品質,讓開發者可以:

  • 依提交的程式碼種類,對其做對應的 lint 、 format 與測試。
  • 只針對提交的程式碼做相關的 lint 、 format 與測試,避免全局的執行處理。
  • git commit 時自動啟用 lint 、 format 與測試。

在 Husky 中設置 lint-staged

為了在提交代碼時可以觸發各種檢查工具,我們需要將 lint-staged 藉由 Husky 配置到 Git hook 上:

npx husky add .husky/pre-commit 'npx lint-staged'

然後重新註冊 Git hooks :

npm install

npm install 會觸發在執行 husky-init 時建立的 prepare script ,去做相關的初始化工作。

如果需要 Husky 相關的使用說明,請看「 20 - Husky - Git Hooks 工具」的介紹。

這樣一來,每當我們提交代碼時,就會叫用 npx lint-staged 把提交的檔案路徑送去給 lint-staged 中設定指令做處理。

在 lint-staged 中依照檔案類型設置對應的工具

為了讓 lint-staged 可以對於各類型的檔案提供合適的工具做處理,我們需要設定 lint-staged.config.js

module.exports = {
  'package.json': ['prettier --write'],
  '*.js': ['npx eslint --fix', 'prettier --write'],
  '*.css': ['stylelint --fix', 'prettier --write'],
  '*.md': ['markdownlint', 'prettier --write'],
};

藉由 glob 設定各個檔案類型應該被哪些工具檢查,藉以避免不必要的花費與衝突產生。

本文重點整理

  • 在每次提交時,對專案中所有檔案做優化的處理是沒必要的,只會浪費更多的資源。
  • lint-staged 讓優化的程序可以聚焦於暫存檔案上,只有那些這次提交的檔案會作用這些優化程序,並且可以利用 glob 指示要使用不同指令。
  • 藉由 lint-staged 與 Husky 的搭配,我們可以在 git commit 的時候叫用 lint-staged ,接著在 lint-staged 中針對各種不同的檔案類型設置對應的處理工具,如此一來,可以減少工具因不符合的檔案而進行無用的處理,也可以降低衝突的產生。

參考資料


上一篇
27 - EditorConfig + Prettier + ESLint + Stylelint + Markdownlint - All you can lint
下一篇
29 - Hygen - 程式碼產生器
系列文
尋覓網站開發的神兵利器40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言